<!-- 能源监测地图 -->

<script setup lang="ts">
import { createVNode, render } from 'vue'
import { useIndexStore } from '@/store'
import setupCesiumMap from '@/setup/cesiumMap'
import mapSign from '@/components/MapSign.vue'
import qylx from '@/assets/image/qylx.png'

/** tree start */
const treeRef = ref(null) as any
const defaultProps = {
  label: 'mc',
}
const treeData: any = ref([])

onMounted(() => {
  //地球初始化
  setupCesiumMap()

  //初始定位
  map.setCameraInfo({
    position: {
      // 位置
      lon: 119.59198244360422,
      lat: 34.53251784411287,
      height: 15000,
    },
    rotation: {
      // 旋转角度
      heading: 10,
      pitch: -90,
      roll: 0,
    },
  })
})

//加载企业信息
function getQylb() {
  //查询企业列表
  queryQylb({ nylx: '1' }).then((res: any) => {
    treeData.value = res?.map((item: any) => {
      return {
        ...item,
        mc: item.qymc,
      }
    })

    if (treeData.value.length > 0) {
      treeRef.value.defaultActive(treeData.value[0].id) //默认展开高亮操作

      useIndexStore().mapActiveQyId = treeData.value[0].id
      useIndexStore().mapActiveQyMc = treeData.value[0].qymc

      addOverlay(treeData.value[0].jd, treeData.value[0].wd) //默认第一个企业上图
    }
  })
}
getQylb()

//节点点击事件
const treeClick = (data: any, node: any) => {
  useIndexStore().mapActiveQyId = data.id
  useIndexStore().mapActiveQyMc = data.qymc

  addOverlay(data.jd, data.wd)
}
/** tree end */

let myOverlay: any = null
let mark: any = null
function addOverlay(jd: any, wd: any) {
  //定位
  map.setCameraInfo({
    position: {
      // 位置
      lon: jd,
      lat: wd,
      height: 15000,
    },
    rotation: {
      // 旋转角度
      heading: 10,
      pitch: -90,
      roll: 0,
    },
  })

  if (myOverlay && mark) {
    map.removeOverlay(myOverlay)
    map.removeFeature(mark)
  }

  mark = new CgsMark({
    position: [jd, wd],
    url: qylx,
    scale: 1.0,
    labeloffset: [20, 0],
  })
  map.addFeature(mark)

  //添加覆盖物
  //组件转成真实dom
  const vnode = createVNode(mapSign)
  const redom = document.createElement('div')
  render(vnode, redom)

  myOverlay = new CgsOverlay({
    position: [jd, wd, 20], // 位置
    positioning: 'center-center',
    element: redom, // dom元素
    offset: [0, -50],
    draggable: false,
    showLine: false,
    lineStyle: {
      width: 2,
      color: 'rgba(255,255,255,0.9)',
    },
  })
  map.addOverlay(myOverlay)
}
</script>

<template>
  <!-- top title -->
  <div class="h-60px lh-60px bg-[#f8f8f8]">
    <h1 class="m-0 text-center text-36px font-bold text-[#333]">徐圩新区石化基地能源监测地图</h1>
  </div>

  <div class="position-relative flex flex-row p-10px box-border" style="height: calc(100% - 100px)">
    <!-- tree -->
    <div class="w-330px box-border" style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)">
      <!-- 企业列表 -->
      <EnterpriseList
        ref="treeRef"
        :tree-data="treeData"
        :default-props="defaultProps"
        @tree-click="treeClick"
      ></EnterpriseList>
    </div>
    <!-- map -->
    <div id="mapContainer"></div>
  </div>
</template>

<style>
#mapContainer {
  position: absolute;
  top: 10px;
  left: 350px;
  bottom: 10px;
  width: calc(100% - 360px);
  height: calc(100% - 20px);
}
</style>
